<template>
  <div class="record-wrapper" id="record">
    <div v-for="callLog in role">
      <div class="msg msg-left" v-if="callLog.flag == 'agent'">
        <div class="img-wrapper">
          <span>{{ user_info.name }}:</span>
        </div>
        <div class="message-wrapper message-wrapper-left">
          <div class="message">{{ callLog.text }}</div>
        </div>
      </div>

      <div class="msg msg-right" v-if="callLog.flag == 'customer'">
        <div class="img-wrapper">
          <span>:{{ doctor_info.name }}</span>
        </div>
        <div class="message-wrapper message-wrapper-right">
          <div class="message">{{ callLog.text }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import RealTimeTransfer from "../assets/js/realTimeTransfer";
import Cookie from "_js-cookie@2.2.0@js-cookie";

export default {
  data() {
    return {
      //代表信息
      user_info: {},
      //医生信息
      doctor_info: {},
      role: [],
/*      role: [
        {
          "uid": "0bb06290-d0ad-11ea-b0bb-27cad9c7d260",
          "event": "translationText",
          "account": "T00000017308",
          "sendTime": "2021-03-01 16:33:21",
          "flag": "agent",
          "text": "喂，你好。",
          "callSheetId": "380df539-32eb-47ff-a835-6a340542dcc3"
        },
        {
          "uid": "0bb06290-d0ad-11ea-b0bb-27cad9c7d260",
          "event": "translationText",
          "account": "T00000017308",
          "sendTime": "2021-03-01 16:33:22",
          "flag": "customer",
          "text": "喂喂喂。",
          "callSheetId": "380df539-32eb-47ff-a835-6a340542dcc3"
        },
        {
          "uid": "0bb06290-d0ad-11ea-b0bb-27cad9c7d260",
          "event": "translationText",
          "account": "T00000017308",
          "sendTime": "2021-03-01 16:33:27",
          "flag": "agent",
          "text": "哎，不是我查后悔。",
          "callSheetId": "380df539-32eb-47ff-a835-6a340542dcc3"
        },
        {
          "uid": "0bb06290-d0ad-11ea-b0bb-27cad9c7d260",
          "event": "translationText",
          "account": "T00000017308",
          "sendTime": "2021-03-01 16:33:29",
          "flag": "customer",
          "text": "放棒的。",
          "callSheetId": "380df539-32eb-47ff-a835-6a340542dcc3"
        },
        {
          "uid": "0bb06290-d0ad-11ea-b0bb-27cad9c7d260",
          "event": "translationText",
          "account": "T00000017308",
          "sendTime": "2021-03-01 16:33:22",
          "flag": "customer",
          "text": "喂喂喂。",
          "callSheetId": "380df539-32eb-47ff-a835-6a340542dcc3"
        },
        {
          "uid": "0bb06290-d0ad-11ea-b0bb-27cad9c7d260",
          "event": "translationText",
          "account": "T00000017308",
          "sendTime": "2021-03-01 16:33:22",
          "flag": "agent",
          "text": "喂喂喂。",
          "callSheetId": "380df539-32eb-47ff-a835-6a340542dcc3"
        },
        {
          "uid": "0bb06290-d0ad-11ea-b0bb-27cad9c7d260",
          "event": "translationText",
          "account": "T00000017308",
          "sendTime": "2021-03-01 16:33:22",
          "flag": "customer",
          "text": "喂喂喂。",
          "callSheetId": "380df539-32eb-47ff-a835-6a340542dcc3"
        },
        {
          "uid": "0bb06290-d0ad-11ea-b0bb-27cad9c7d260",
          "event": "translationText",
          "account": "T00000017308",
          "sendTime": "2021-03-01 16:33:22",
          "flag": "customer",
          "text": "喂喂喂。",
          "callSheetId": "380df539-32eb-47ff-a835-6a340542dcc3"
        },
        {
          "uid": "0bb06290-d0ad-11ea-b0bb-27cad9c7d260",
          "event": "translationText",
          "account": "T00000017308",
          "sendTime": "2021-03-01 16:33:22",
          "flag": "customer",
          "text": "喂喂喂。",
          "callSheetId": "380df539-32eb-47ff-a835-6a340542dcc3"
        },
        {
          "uid": "0bb06290-d0ad-11ea-b0bb-27cad9c7d260",
          "event": "translationText",
          "account": "T00000017308",
          "sendTime": "2021-03-01 16:33:22",
          "flag": "customer",
          "text": "喂喂喂。",
          "callSheetId": "380df539-32eb-47ff-a835-6a340542dcc3"
        },
        {
          "uid": "0bb06290-d0ad-11ea-b0bb-27cad9c7d260",
          "event": "translationText",
          "account": "T00000017308",
          "sendTime": "2021-03-01 16:33:22",
          "flag": "customer",
          "text": "喂喂喂。",
          "callSheetId": "380df539-32eb-47ff-a835-6a340542dcc3"
        },
        {
          "uid": "0bb06290-d0ad-11ea-b0bb-27cad9c7d260",
          "event": "translationText",
          "account": "T00000017308",
          "sendTime": "2021-03-01 16:33:22",
          "flag": "customer",
          "text": "喂喂喂。",
          "callSheetId": "380df539-32eb-47ff-a835-6a340542dcc3"
        },
        {
          "uid": "0bb06290-d0ad-11ea-b0bb-27cad9c7d260",
          "event": "translationText",
          "account": "T00000017308",
          "sendTime": "2021-03-01 16:33:22",
          "flag": "agent",
          "text": "喂喂喂。",
          "callSheetId": "380df539-32eb-47ff-a835-6a340542dcc3"
        },
        {
          "uid": "0bb06290-d0ad-11ea-b0bb-27cad9c7d260",
          "event": "translationText",
          "account": "T00000017308",
          "sendTime": "2021-03-01 16:33:22",
          "flag": "agent",
          "text": "喂喂喂。",
          "callSheetId": "380df539-32eb-47ff-a835-6a340542dcc3"
        },
        {
          "uid": "0bb06290-d0ad-11ea-b0bb-27cad9c7d260",
          "event": "translationText",
          "account": "T00000017308",
          "sendTime": "2021-03-01 16:33:22",
          "flag": "agent",
          "text": "喂喂喂。",
          "callSheetId": "380df539-32eb-47ff-a835-6a340542dcc3"
        },
        {
          "uid": "0bb06290-d0ad-11ea-b0bb-27cad9c7d260",
          "event": "translationText",
          "account": "T00000017308",
          "sendTime": "2021-03-01 16:33:22",
          "flag": "agent",
          "text": "喂喂喂。",
          "callSheetId": "380df539-32eb-47ff-a835-6a340542dcc3"
        },
        {
          "uid": "0bb06290-d0ad-11ea-b0bb-27cad9c7d260",
          "event": "translationText",
          "account": "T00000017308",
          "sendTime": "2021-03-01 16:33:22",
          "flag": "agent",
          "text": "喂喂喂。",
          "callSheetId": "380df539-32eb-47ff-a835-6a340542dcc3"
        },
        {
          "uid": "0bb06290-d0ad-11ea-b0bb-27cad9c7d260",
          "event": "translationText",
          "account": "T00000017308",
          "sendTime": "2021-03-01 16:33:27",
          "flag": "agent",
          "text": "哎，不是我查后悔。",
          "callSheetId": "380df539-32eb-47ff-a835-6a340542dcc3"
        },
        {
          "uid": "0bb06290-d0ad-11ea-b0bb-27cad9c7d260",
          "event": "translationText",
          "account": "T00000017308",
          "sendTime": "2021-03-01 16:33:27",
          "flag": "agent",
          "text": "哎，不是我查后悔。",
          "callSheetId": "380df539-32eb-47ff-a835-6a340542dcc3"
        },        {
          "uid": "0bb06290-d0ad-11ea-b0bb-27cad9c7d260",
          "event": "translationText",
          "account": "T00000017308",
          "sendTime": "2021-03-01 16:33:27",
          "flag": "agent",
          "text": "哎，不是我查后悔。",
          "callSheetId": "380df539-32eb-47ff-a835-6a340542dcc3"
        },        {
          "uid": "0bb06290-d0ad-11ea-b0bb-27cad9c7d260",
          "event": "translationText",
          "account": "T00000017308",
          "sendTime": "2021-03-01 16:33:27",
          "flag": "agent",
          "text": "哎，不是我查后悔。",
          "callSheetId": "380df539-32eb-47ff-a835-6a340542dcc3"
        },        {
          "uid": "0bb06290-d0ad-11ea-b0bb-27cad9c7d260",
          "event": "translationText",
          "account": "T00000017308",
          "sendTime": "2021-03-01 16:33:27",
          "flag": "agent",
          "text": "哎，不是我查后悔。",
          "callSheetId": "380df539-32eb-47ff-a835-6a340542dcc3"
        },
      ],*/
    }
  },
  mounted() {
    this.user_info = JSON.parse(this.EncryUtil.decryptByAES(Cookie.get('user_info')));
    this.doctor_info = JSON.parse(this.EncryUtil.decryptByAES(Cookie.get('doctor_info')));
    this.Real()
  },
  methods: {
    Real() {
      let _this = this
      new RealTimeTransfer({
        server: 'ykf-phonebar-push.7moor.com',
        password: 'c9262a273addc56a62b5067075276820',
        account: 'T00000017308',
        exten: '8000',
        segment: false,
        message: function (data) {
          if (data.text) {
            _this.role.push(data)
          }
          // console.log(JSON.stringify(_this.role))
        },
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.record-wrapper {
  margin: 4px;
  padding: 4px;
}

.time {
  text-align: center;
}

.msg {
  display: flex;
  flex-direction: row;
  padding-bottom: 10px;

  .message-wrapper {
    max-width: 220px;

    margin: 0px 10px 0px 10px;

    .message {
      margin: 8px;
      word-wrap: break-word; //英文换行
    }
  }

  .message-wrapper-left {
    background-color: #C0C4CC;
    border-radius: 0px 12px 12px 12px;
  }

  .message-wrapper-right {
    background-color: powderblue;
    border-radius: 12px 0px 12px 12px;
  }

  .img {
    flex: auto;
    height: 36px;
    width: 36px;
    border-radius: 8px;
  }
}

.msg-right {
  flex-direction: row-reverse;
}

.msg-left {
  flex-direction: row;
}
</style>
